import React, { useState } from 'react';
import Head from 'next/head'
import styles from '../styles/Home.module.css'

// const renderSquare = () => {
// return <span>squaresdfsdf</span>
// }


export default function Home(props) {
  const [formData, setFormData] = useState({
    name: "",
    password: "",
    repeatPassword: ""
  })
  const [errors, setErrors] = useState({});
  /**  
 * @description 获取当前表单的校验信息
 */
const getValidate = () => {
  const newErrors = {};
  if (formData.name.trim() === "")
    newErrors.name = "Username is required.";
  if (formData.password.trim() === "")
    newErrors.password = "Password is required.";
  if (formData.password !== formData.repeatPassword) {
    newErrors.repeatPassword = "重复密码与密码不一致";
  }
  return Object.entries(newErrors).length === 0 ? null : newErrors;
};
const register = async () => {
  const validate = getValidate();
  setErrors(validate||{});
  if(validate) {
    return;
  }
  const res = await fetch("http://127.0.0.1:3000/api/post/register",{
    method: "post",
    body: JSON.stringify(formData),
    headers: {
      "Content-Type": "application/json"
    }
  })
  const data = await res.json(); 
  alert(data.message); 
}

const handleChange = ({ currentTarget: input}) => {
  const newData = {
    ...formData,
    [input.name]: input.value
  }
  setFormData(newData);
}
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      {/* <main className={styles.main}> */}
        {/* {renderSquare(props)} */}
        {/* <h1 className={styles.title}> */}
          {/* Hello, {props.name}, Welcome to <a href="https://nextjs.org">Next.js!</a> */}
        {/* </h1> */}
        <div className={styles.contain}>
          {/* <form> */}
          <div>
            <div>
            <label>用户名:</label>
            <input name="name" value={formData.name} onChange={handleChange}></input>
            <p>{errors.name}</p>
            </div>
            <div>
            <label>密码：</label>
            <input name="password" value={formData.password} onChange={handleChange}></input>
            <p>{errors.password}</p>
            </div>
            <div>
            <label>确认密码：</label>
            <input name="repeatPassword" value={formData.repeatPassword} onChange={handleChange}></input>
            <p>{errors.repeatPassword}</p>
            </div>
            <div>
            <button onClick={register}>注册</button>
            </div>
            </div>
          {/* </form> */}
        </div>
        
      {/* </main> */}

      {/* <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
        </a>
      </footer> */}
    </div>
  )
}

// export const getServerSideProps = async () => {
//   let res = await fetch("http://127.0.0.1:3000/api/hello");
//   let data = await res.json();
//   return {
//     props: data
//   }
// }
